---
permalink: "/ui/ui-elements/web-view/dispatch-event/index.xml"
tags: "UI/UI Elements/Web View"
hv_title: "Event Dispatch"
hv_button_behavior: "back"
---
{% extends 'templates/base.xml.njk' %}

{% block styles %}
  <style id="container" flexShrink="1" flex="1" />
  <style id="webview-container" height="72" />
  <style id="content" backgroundColor="#ccc" padding="24" />
{% endblock %}

{% block container %}
  <view style="container">
    <view style="webview-container">
      <web-view
        html="
              &lt;div style=&quot;text-align: center&quot;&gt;
              &lt;button
              style=&quot;font-size: 60px;&quot;
              onClick=&quot;window.ReactNativeWebView.postMessage('hyperview:helloworld')&quot;
              &gt;
              Post message
              &lt;/button&gt;
              &lt;/div&gt;
             "
      />
    </view>
    <view
      trigger="on-event"
      event-name="helloworld"
      action="append"
      href="/hyperview/public/ui/ui-elements/web-view/dispatch-event/append.xml"
      scroll="true"
      style="content"
    />
  </view>
{% endblock %}
